import React, { useRef, useState } from 'react'
import MescrollReact, { refType } from '../../yjrLib'

const mockData = (length: number) => Array.from({ length }, (_v, i) => `item${i + 1}`)
const pageSize = 10

function Demo() {
  const ref = useRef<refType | null>(null)
  const [page, setPage] = useState(1)
  const [list, setList] = useState(mockData(page * pageSize))

  const dropDownCb = () => {
    setPage(() => {
      setList(mockData(1 * pageSize))
      ref.current?.endDropDown()
      return 1
    })
  }
  const upGlideCb = () => {
    setPage(v => {
      const nextPgae = v + 1
      setList(mockData(nextPgae * pageSize))
      // mock第五页之后没有数据了
      ref.current?.endUpGlide(nextPgae < 5)
      return nextPgae
    })
  }
  return (
    <>
      <MescrollReact className="wrap" ref={ref} dropDownCb={dropDownCb} upGlideCb={upGlideCb}>
        {list.map(v => (
          <div className="each" key={v}>
            {v}
          </div>
        ))}
      </MescrollReact>
    </>
  )
}

export default Demo
